<template>
  <div class="app-container bg">
    <el-form class="themm-black themm-bg" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="标题">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入标题"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="上传时间 " prop="emotional">
        <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="任务状态 " prop="taskStatus">
        <el-select clearable v-model="taskStatus" placeholder="请选择任务状态" style="width: 240px;">
					<el-option v-for="(item,key) in taskStatusMap" :key="key" :label="item" :value="key" />
				</el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" class="primary-btn" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" class="reset-btn" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 创作文章 -->
    <div class="create-article">
      <div class="tab-list">
        <div
          class="tab-item"
          :class="item.value == curTab?'active':''"
          v-for="(item,index) in tabList"
          @click="handleTab(item.value)">
          {{ item.name }}
        </div>
      </div>
      <el-row class="article-list" v-loading="loading" :gutter="24">
        <el-col :span="6" v-for="(item,index) in taskList" :key="index">
          <div class="article-item" :key="index">
            <div class="colse-btn" @click="handleClose(item)">
              <img style="width: 30px;height: 30px;" src="@/assets/icons/del.png" alt="">
            </div>
            <div>
              <div class="article-item-con">
                <!-- <img class="article-item-img" src="@/assets/images/running.png" alt=""> -->
                <div v-if="item.type=='IMAGE'" class="article-item-img">
                  <img v-if="item.taskContent.imageUrl" class="article-item-img" :src="item.taskContent.imageUrl"  @error="handleError"/>
                  <img v-else class="article-item-img" src="@/assets/images/moren.png" alt="">
                </div>
                <div v-if="item.type=='NEWS'">
                  <div v-if="item.taskContent.images">
                    <img v-if="sindex==0" class="article-item-img" v-for="(img,sindex) in item.taskContent.images" :src="img"  @error="handleError"/>
                  </div>
                  <img v-else class="article-item-img" src="@/assets/images/moren.png" alt="">
                </div>
                <div v-if="item.type=='VIDEO' || item.type=='DIGITAL_PERSON'" class="article-item-img">
                  <!-- {{ item.taskContent }}111 -->
                  <video v-if="item.taskContent.videoPath" class="article-item-video" :src="item.taskContent.videoPath"></video>
                  <img v-else class="article-item-img" src="@/assets/images/moren.png" alt="">
                </div>
                <!-- <video v-if="item.type=='VIDEO' || item.type=='DIGITAL_PERSON'" class="article-item-video" :src="item.taskContent.videoPath"></video> -->
                <div class="article-item-right">
                  <el-tooltip class="item" :disabled="item.taskContent.title.length<12" :content="item.taskContent.title" placement="top">
                    <div class="article-item-title ellipsis">{{item.taskContent.title}}</div>
                  </el-tooltip>

                  <div class="article-item-tag">
                    <div class="article-item-tag-item">
                        <div class="tag-name">情绪价值</div>
                        <div class="tag-value">{{ item.taskContent.emotionalScore || '--' }}</div>
                    </div>
                    <div class="article-item-tag-item">
                        <div class="tag-name">真实度</div>
                        <div class="tag-value">{{ item.taskContent.realityScore || '--' }}</div>
                    </div>
                    <div class="article-item-tag-item">
                        <div class="tag-name">引导力</div>
                        <div class="tag-value">{{ item.taskContent.totalScore || '--' }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="article-item-bottom">
                <div class="article-time">{{ parseTime(new Date(item.finishTime), '{y}-{m}-{d}') }}   {{item.nickName}}创作 {{tagList[item.type]}}</div>
                <div class="article-tag">
                  <span class="tag-item" v-if="item.privateMaterialId"> <i class="el-icon-circle-check"></i> 个人素材</span>
                  <el-button class="tag-item tag-blue" :disabled="item.taskStatus !== 'FINISHED'" v-else :loading="item.privateLoading" @click="addPrivate(item)"> <i class="el-icon-plus" v-if="!item.privateLoading"></i> 个人素材</el-button>

                  <span class="tag-item" v-if="item.publicMaterialId"> <i class="el-icon-circle-check"></i> 公共素材</span>
                  <el-button class="tag-item tag-blue" :disabled="item.taskStatus !== 'FINISHED'"  v-else :loading="item.publicLoading" @click="addPublic(item)"> <i class="el-icon-plus" v-if="!item.publicMaterialId"></i> 公共素材</el-button>
                </div>
              </div>
              <div class="article-footer">
                <div class="btn" @click="handleEdit(item)" v-if="
                      item.taskStatus=='FINISHED' || (item.type=='IMAGE' && item.taskStatus=='RUNNING')"
                >编辑</div>
                <div class="btn" @click="handlePreview(item)">查看</div>
              </div>
              <span class="tag generated">
                <img v-if="item.taskStatus=='RUNNING'" src="@/assets/images/running.png" alt="">
                <img  v-if="item.taskStatus=='FINISHED'" src="@/assets/images/success.png" alt="">
                <img  v-if="item.taskStatus=='FAILED'" src="@/assets/images/fail.png" alt="">
              </span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="pagination">
      <pagination
        v-show="total>0"
        :total="total"
        :page-sizes="[8, 16, 24, 32, 40, 48]"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <Preview ref="preview"></Preview>
  </div>
</template>

<script>
import { getTaskList,metaDel,metaAdd } from "@/api/content/task";
import Preview from "./components/Preview";
export default {
  name: "Task",
  components: { Preview },
  data() {
    return {
      loading: true,
      ids: [],
      single: true,
      multiple: true,
      showSearch: true,
      total: 0,
      taskList: [],
      title: "",
      open: false,
      queryParams: {
        pageNum: 1,
        pageSize: 8,
        title:'',
        taskStatus: null
      },
      dateRange:[],
      tabList:[
        {
          name:'全部',
          value:'',
        },
        {
          name:'复合新闻',
          value:'NEWS',
        },
        {
          name:'图片',
          value:'IMAGE',
        },
        {
          name:'短视频',
          value:'VIDEO',
        },
        {
          name:'数字人',
          value:'DIGITAL_PERSON',
        }
      ],
      curTab:'',
      foregroundUrl:'@/assets/images/running.png',
      tagList:{
        'NEWS':'文章',
        'IMAGE':'图片',
        'VIDEO':'短视频',
        'DIGITAL_PERSON':'数字人',
      },
      defaultImg: require('@/assets/images/moren.png'),
      taskStatus: null,
      taskStatusMap: {
        'RUNNING': '运行中',
        'FINISHED': '已完成',
        'FAILED': '失败'
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询内容制作任务列表 */
    getList() {
      this.loading = true;
      getTaskList(this.queryParams).then(response => {
        console.log(response,'taskList');
        this.taskList = response.rows.map(item => {
          item.privateLoading = false;
          item.publicLoading = false;
          if (item.type == 'DIGITAL_PERSON') {
            item.taskContent = item.taskDigitalPerson
          } else if (item.type == 'VIDEO') {
            item.taskContent = item.taskVideo
          } else if (item.type == 'NEWS') {
            item.taskContent = item.taskNews
            console.log(item.taskContent.images,'ssdsd')
            item.taskContent.images = item.taskContent.images==null||item.taskContent.images==''?null:item.taskContent.images.split(',')
          }else{
            item.taskContent = item.taskImage
          }
          return item;
        });
        console.log(this.taskList);
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.startFinishTime = this.dateRange[0] + " 00:00:00";
      this.queryParams.endFinishTime = this.dateRange[1] + " 23:59:59";
      this.queryParams.taskStatus = this.taskStatus;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.queryParams.startFinishTime = ''
      this.queryParams.endFinishTime =''
      this.queryParams.title = ''
      this.taskStatus = null;
      this.resetForm("queryForm");
      this.getList();
    },
    /** 修改按钮操作 */
    handleEdit(row) {
      console.log(row);
      if(row.type == 'NEWS'){
        this.$router.push({
          path: '/content/textMake',
          query: {
            id: row.id
          }
        })
      }else if(row.type == 'IMAGE'){
        this.$router.push({
          path: '/content/imgMake',
          query: {
            id: row.id,
            type:2
          }
        })
      }else if(row.type == 'VIDEO'){
        this.$router.push({
          path: '/content/videoMake',
          query: {
            id: row.id
          }
        })
      }else if(row.type == 'DIGITAL_PERSON'){
        this.$router.push({
          path: '/content/digitalHumanMake',
          query: {
            id: row.id
          }
        })
      }
    },
    // 切换类型
    handleTab(value){
      console.log(value)
      this.curTab = value
      this.queryParams.type = value
      this.queryParams.pageNum = 1;
      this.taskList = []
      this.getList()
    },
    // 查看
    handlePreview(item){
      console.log(item)
      if(item.taskStatus == 'RUNNING'){
        return this.$modal.msgError("制作中，无法查看");
      }
        this.$refs.preview.show(item)
    },
    handleClose(item){
      this.$modal.confirm('是否确认删除?').then(function() {
        return metaDel(item.id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    // 添加任务到素材
    async addPrivate(item){
      const params = {
        id: item.taskContent.taskId,
        savePrivate:true,
        metaName:item.taskContent.title,
        savePublic:item.publicMaterialId?true:false,
      }
      console.log(params)
      item.privateLoading = true
      metaAdd(params).then(data=>{
        console.log(data)
        this.getList();
      }).finally(()=>{
        item.privateLoading = false
      })

    },
    addPublic(item){
      const params = {
        id: item.taskContent.taskId,
        savePrivate:item.privateMaterialId?true:false,
        metaName:item.taskContent.title,
        savePublic:true,
      }
      console.log(params)
      item.publicLoading = true
      metaAdd(params).then(data=>{
        console.log(data)
        this.getList();
      }).finally(()=>{
        item.publicLoading = false
      })
    },
    /**
     * 图片路径404时展示默认图片
     * @param e
     */
    handleError(e) {
        e.target.src = this.defaultImg;
    }
  }
};
</script>
<style lang="scss" scoped>
  .bg{
    background-image: url("../../../assets/images/content_bg.png");
    background-size: 25%;
    background-repeat: no-repeat;
    background-position: top right;
  }
  .create-article{
    background: rgba(255, 255, 255, .1);
    margin-top: 20px;
    border-radius: 12px;
    overflow: hidden;
    .title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 20px 0;
      font-size: 18px;
      .title-right{
        font-size: 16px;
      }
      i{
        font-size: 14px;
      }
    }
  }
  .article-list{
    display: flex;
    flex-wrap: wrap;
    margin: 10px;
    padding-bottom: 10px;
    .article-item{
      position: relative;
      // width: 25%;
      // padding: 10px;
      margin-bottom: 20px;
      color: #fff;
      &>div{
        position: relative;
        width: 100%;
          height: 100%;
          background: rgba(255, 255, 255, .1);
          border-radius: 12px;
          padding: 20px;
      }
      .colse-btn{
        position: absolute;
        right: 10px;
        top: 0;
        width: 30px;
        height: 30px;
        background:none;
        padding: 0;
        z-index: 1;
        cursor: pointer;
      }
      .article-item-con{
          display: flex;
      }
    }
    .article-item-title{
      font-size: 16px;
      margin-bottom: 10px;
      width: 100%;
      height: 25px;
    }
    .article-item-img{
      width: 88px;
      height: 88px;
      border-radius: 8px;
    }
    .article-item-tag{
      display: flex;
      justify-content: space-between;
      .tag-name{
        font-size: 14px;
        color: rgba(255, 255, 255, .6);
        font-family: "Alibaba PuHuiTi 2.0";
        margin-bottom: 10px;
      }
      .tag-value{
        font-size: 16px;
        color: rgba(255, 255, 255, 1);
      }
    }
    .article-item-right{
      flex: 1;
      // margin-left: 16px;
      padding: 0 15px;
      min-width: 0;
    }
    .article-item-bottom{
      font-size: 12px;
      margin-top: 12px;
      margin-bottom: 35px;
      .article-time{

      }
      .article-tag{
        display: flex;
        margin-top: 12px;
        height: 25px;
        .tag-item{
          background-color: rgba(9, 184, 68, 1);
          color: #fff;
          border-radius: 4px;
          margin-right: 10px;
          font-size: 12px;
          padding: 4px 10px;
        }
        .tag-blue{
          background-color: #0057FF;
          // cursor: pointer;
        }
      }
    }
    .article-footer{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      padding: 10px 0;
      justify-content: space-around;
      background: rgba(255, 255, 255, .1);
      border-radius: 0 0 12px 12px;
      .btn{
        flex: 1;
        text-align: center;
        cursor: pointer;
      }
      .btn:first-child{
        border-right: 1px solid rgba(255, 255, 255, .1);
      }
    }
    .tag{
      position: absolute;
      left: 0;
      top: 0;
      width: 30px;
      height: 30px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .generated{
    }
  }
  .tab-list{
    display: flex;
    margin: 20px 32px 0;
    .tab-item{
      width: 80px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      margin-right: 16px;
      background: rgba(255, 255, 255, .1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }
    .active{
      background-color: rgba(0, 87, 255, 1);

      border-radius: 4px;
    }
  }
  .article-item-video{
    width: 88px;
  }
</style>
